<!doctype html>
<html>
<head>
	<title>^js-42-田</title>
	<meta charset="UTF-8"/>
	<style>
	
	*{
		margin:10px;
		padding:0;
		font-size:12px;
	}
		a{
			text-decoration:none;/*去掉a标签超链接的下划线*/
		}
		ul li{
			list-style:none;/*去掉ul列表前面的点*/
		}
		#box{
			width:700px;
			margin:auto;
			border:1px solid #bbb;
		}
		p,span{
			text-align:center;
		}
		p{
			background-color:#566555;
			font-size:18px;
		}
		span{
			display:inline-block;
			width:50px;
			height:20px;
			margin-right:2px;
			background-color:#bbb;
		}
	</style>
</head>
<body>
	<div id="box">
	<p>九九乘法表</p>
	</div>
</body>

	<script>
		var i=9,
			str="X",
			oBox=document.getElementById("box");
			

			(  /*  console.log()  
				oBox.innerHTML="<span>"+b+str+c+"</span>";
			*/
				function(i,str){
					for(var b=1;b<=i;b++){  
						
						for(var c=1;c<=b;c++){
							oBox.innerHTML+="<span>"+b+str+c+"="+c*b+"</span>";
							if(c===b){
								oBox.innerHTML+="</br>";
							}
						}
						
					}
					oBox.innerHTML+="<hr>";

					for(var b=i;b>=1;b--){  
						
						for(var c=1;c<=b;c++){
							oBox.innerHTML+="<span>"+b+str+c+"="+c*b+"</span>";
							if(c===b){
								oBox.innerHTML+="</br>";
							}
						}
						
					}
					oBox.innerHTML+="<hr>";

					for(var b=1;b<=i;b++){  
						
						for(var c=b;c<=i;c++){
							oBox.innerHTML+="<span>"+b+str+c+"="+b*c+"</span>";
							if(c===i){
								oBox.innerHTML+="</br>";
							}
						}
						
					}
					oBox.innerHTML+="<hr>";
				}
			)(i,str);
	</script>
</html>